<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="添加会员" ref="navbar" ></fa-navbar>
		<view class="content" style="padding-bottom:50px ;">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" prop="name" label-width="140">
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="手机号" prop="mobile" label-width="140">
					<u-input v-model="form.mobile" />
				</u-form-item>
				<u-form-item label="生日" prop="sr" label-width="140">
					<!-- <u-input v-model="form.sr" @click="show1 = true"/> -->
					<u-input v-model="form.sr" />
				</u-form-item>
				<!-- <u-form-item label="生日" prop="sr" label-width="140">
					<u-input v-model="form.sr" @click="show1 = true"/>
				</u-form-item> -->
				<!-- <u-calendar v-model="show1" :mode="mode1" @change="change1"></u-calendar> -->
				<u-form-item label="年龄" prop="nl" label-width="140">
					<u-input v-model="form.nl" />
				</u-form-item>
				<u-form-item label="居住区域" prop="jzqy" label-width="140">
					<u-input v-model="form.jzqy" />
				</u-form-item>
				<u-form-item label="退休工资" prop="txgz" label-width="140">
					<u-input v-model="form.txgz" />
				</u-form-item>
				<u-form-item label="居住情况" prop="jzqk" label-width="140">
					<u-input v-model="form.jzqk" />
				</u-form-item>
				<!-- 精准定位的提示层 -->
				
				<u-form-item label="推荐人" label-width="140" class="search-wrapper" id="searchWrapper">
					<u-input v-model="gl_name" placeholder="请选择" @input="handleSearchInput" class="custom-search"/>
					<!-- <u-select v-model="show" mode="single-column" :list="list1" @confirm="confirm"></u-select> -->
					<view class="suggest-layer" :style="suggestPosition" v-show="showSuggest">
						<scroll-view scroll-y class="suggest-list">
							<!-- 结果列表 -->
							<view v-for="(item, index) in searchResults" :key="index" class="suggest-item"
								@click.stop="handleSelect(item)">
								<text class="suggest-text">{{ item.username }}</text>
							</view>
						</scroll-view>
					</view>
				</u-form-item>
				
				<u-form-item label="备注" prop="bz" label-width="140">
					<u-input v-model="form.bz" />
				</u-form-item>
				<u-form-item label="羊奶剩余" prop="yangnai" label-width="140">
					<u-input v-model="form.yangnai" />
				</u-form-item>
				<u-form-item label="沙棘剩余" prop="shaji" label-width="140">
					<u-input v-model="form.shaji" />
				</u-form-item>
				<u-form-item label="硒剩余" prop="xi" label-width="140">
					<u-input v-model="form.xi" />
				</u-form-item>
				<u-form-item label="黄精剩余" prop="huangjing" label-width="140">
					<u-input v-model="form.huangjing" />
				</u-form-item>
				<!-- <u-form-item label="性别" prop="sex" label-width="100">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio 
							v-for="(item, index) in sexlist" :key="index" 
							:name="item.name"
							:disabled="item.disabled"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item> -->
				
			</u-form>
			<u-button @click="submit" :custom-style="customStyle">添加</u-button>
		</view>
		<u-toast ref="uToast" />
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import { archives } from '@/common/fa.mixin.js';
	export default {
		mixins: [archives],
		onLoad(e) {
			let query = e || {};
			this.user_id = query.user_id || 0;
			this.is_update = true;
		},
		mounted() {
			// 获取搜索框位置信息
			// this.getSearchPosition()
		},
		data() {
			return {
				searchKey: '',
				showSuggest: false,
				searchResults: [],
				suggestPosition: '', // 初始定位
				user_id: 0,
				customStyle: {
					marginTop: '50px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#333',
					border: 'none',
					background: '#e0ebdd',
				},
				show: false,
				show1: false,
				mode1: 'date',
				list1: [],
				sexlist: [
					{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '男',
				form: {
					name: '',
					mobile: '',
					jzqy: '',
					sr:'',
					txgz: '',
					jzqk: '',
					bz: '',
					nl: '',
					gl_id:0,
					yangnai: '',
					shaji: '',
					xi: '',
					huangjing: '',
				},
				gl_name:'',
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 获取搜索框节点信息
			async getSearchPosition() {
				const query = uni.createSelectorQuery().in(this)
				query.select('#searchWrapper').boundingClientRect(res => {
					if (res) {
						this.searchRect = {
							top: res.top,
							left: res.left,
							width: res.width,
							height: res.height
						}
					}
				}).exec()
			},
			async handleSearchInput(val) {
				if (val) {
					await this.$nextTick()
					this.showSuggest = true
					let data = {
						keyword:val
					};
					let res = await this.$api.myTjr(data);
					console.log(res,'dd')
					var mockData = res.data;
					this.searchResults = mockData;
				} else {
					this.showSuggest = false
				}
			},
			// 更新提示层位置

			// 选中建议项
			handleSelect(item) {
			  this.gl_name = item.username;
			  this.form.gl_id = item.id;
			  this.showSuggest = false  // 确保关闭弹窗
			},
			confirm(e) {
				this.form.gl_id = e[0].value;
				this.gl_name = e[0].label;
			},
			change1(e) {
				console.log(e);
				console.log();
				if(e){
					this.form.sr = e.result;
					this.form.nl = this.calculateAge(e.result);
				}
			},
			calculateAge(birthday) {
			  // 解析日期为本地时间的年、月、日
			  const parts = birthday.split('-');
			  const year = parseInt(parts[0], 10);
			  const month = parseInt(parts[1], 10) - 1; // 月份从0开始（0代表1月）
			  const day = parseInt(parts[2], 10);
			  const birthDate = new Date(year, month, day);
			  
			  const today = new Date(); // 当前本地日期
			  
			  // 计算年龄
			  let age = today.getFullYear() - birthDate.getFullYear();
			  
			  // 检查是否已过生日
			  const currentMonth = today.getMonth();
			  const birthMonth = birthDate.getMonth();
			  if (currentMonth < birthMonth || 
			      (currentMonth === birthMonth && today.getDate() < birthDate.getDate())) {
			    age--;
			  }
			  
			  return age;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过',this.form);
						
						this.$api.addStoreMember({ 
							name: this.form.name,
							mobile: this.form.mobile,
							jzqy: this.form.jzqy,
							txgz: this.form.txgz,
							jzqk: this.form.jzqk,
							bz: this.form.bz,
							sr: this.form.sr,
							nl: this.form.nl,
							gl_id:this.form.gl_id,
							yangnai: this.form.yangnai,
							shaji: this.form.shaji,
							xi: this.form.xi,
							huangjing: this.form.huangjing,
						}).then(res => {
			
							if(res.code == 1){
								uni.showToast({
									title: '添加成功',
									icon: 'success',
									duration: 2000,
									success: function (res1) {
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/my/user_list'
											});
										}, 2000);
										
										
									},
								});

							}else{
								uni.showToast({
									title: res.msg,
									icon: 'error',
									duration: 2000,
								});
							}
							
						});
						
					} else {
						console.log('验证失败');
					}
				});
			},
			
			//性别
			radioGroupChange(e) {
				this.form.sex = e
				// console.log(e,'22');
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.content{
		width: 90%;margin: 10px auto;
	}
</style>
<style lang="scss" scoped>
	/* 搜索框定制 */
	.custom-search {
		/deep/ .u-content {
			border: 4rpx solid #007AFF !important;
			border-radius: 8rpx !important;
		}
		position: relative;
	}
	/* 精准定位层 */
	.suggest-layer {
		position: absolute;
		top: 70;
		left: 0;
		z-index: 100;
		width: 100%;
		background: #fff;
		border: 4rpx solid #007AFF;
		border-radius: 0 0 8rpx 8rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	/* 标题样式 */
	.suggest-title {
		padding: 20rpx 32rpx;
		border-bottom: 2rpx solid #eee;

		.title-text {
			font-size: 24rpx;
			color: #666;
		}
	}

	/* 列表项样式 */
	.suggest-list {
		max-height: 60vh;

		.suggest-item {
			padding: 28rpx 32rpx;

			&:active {
				background: #f5f5f5;
			}

			.suggest-text {
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
			}
		}
	}
</style>
